<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="快速开发框架" /> <meta name="description" content="快速开发框架">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon.png">
    <title>快速开发框架</title>
    <!-- Bootstrap Core CSS -->
    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <script src="assets/plugins/vue/vue.min.js"></script>
    <script src="material/js/component/index.js"></script>

    <!-- Custom CSS -->
    <link href="material/css/style.css" rel="stylesheet">
    <!-- You can change the theme colors from here -->
    <link href="material/css/colors/default-dark.css" id="theme" rel="stylesheet">
    <link href="material/css/tab.css" rel="stylesheet">
    <link href="material/css/index.css" rel="stylesheet">

    <style>
        body {
            background: #eef5f9;
            font-family: "Poppins", sans-serif;
            margin: 0;
            overflow-x: hidden;
            color: #67757c;
            font-weight: 300;
            min-height: 640px;
        }

        .page-wrapper {
            margin-left: 110px;
        }
    </style>
</head>

<body class="fix-header fix-sidebar card-no-border">
    <div id="wrapper">

        <div id="main-wrapper">

            <div style="padding-top: 30px">

                <div  class="row">
                    <!-- Column -->
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex flex-row">
                                    <div class="round round-lg align-self-center round-info"><i class="ti-wallet"></i></div>
                                    <div class="m-l-10 align-self-center">
                                        <h3 class="m-b-0 font-light">$3249</h3>
                                        <h5 class="text-muted m-b-0">Total Revenue</h5></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <!-- Column -->
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex flex-row">
                                    <div class="round round-lg align-self-center round-warning"><i class="mdi mdi-cellphone-link"></i></div>
                                    <div class="m-l-10 align-self-center">
                                        <h3 class="m-b-0 font-lgiht">$2376</h3>
                                        <h5 class="text-muted m-b-0">Online Revenue</h5></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <!-- Column -->
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex flex-row">
                                    <div class="round round-lg align-self-center round-primary"><i class="mdi mdi-cart-outline"></i></div>
                                    <div class="m-l-10 align-self-center">
                                        <h3 class="m-b-0 font-lgiht">$1795</h3>
                                        <h5 class="text-muted m-b-0">Offline Revenue</h5></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <!-- Column -->
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex flex-row">
                                    <div class="round round-lg align-self-center round-danger"><i class="mdi mdi-bullseye"></i></div>
                                    <div class="m-l-10 align-self-center">
                                        <h3 class="m-b-0 font-lgiht">$687</h3>
                                        <h5 class="text-muted m-b-0">Ad. Expense</h5></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                </div>

                <div class="card-group">
                    <!-- Column -->
                    <div class="card">
                        <div class="card-body text-center">
                            <h4 class="text-center">Unique Visit</h4>
                            <div id="spark8"><canvas style="display: inline-block; width: 99px; height: 70px; vertical-align: top;" width="99" height="70"></canvas></div>
                        </div>
                        <div class="box b-t text-center">
                            <h4 class="font-medium m-b-0"><i class="ti-angle-up text-success"></i>  12456</h4></div>
                    </div>
                    <!-- Column -->
                    <!-- Column -->
                    <div class="card">
                        <div class="card-body text-center">
                            <h4 class="text-center">Total Visit</h4>
                            <div id="spark9"><canvas style="display: inline-block; width: 99px; height: 70px; vertical-align: top;" width="99" height="70"></canvas></div>
                        </div>
                        <div class="box b-t text-center">
                            <h4 class="font-medium m-b-0"><i class="ti-angle-down text-danger"></i> 456</h4></div>
                    </div>
                    <!-- Column -->
                    <!-- Column -->
                    <div class="card">
                        <div class="card-body text-center">
                            <h4 class="text-center">Bounce rate</h4>
                            <div id="spark10"><canvas style="display: inline-block; width: 99px; height: 70px; vertical-align: top;" width="99" height="70"></canvas></div>
                        </div>
                        <div class="box b-t text-center">
                            <h4 class="font-medium m-b-0"><i class="ti-angle-up text-success"></i>  12456</h4></div>
                    </div>
                    <!-- Column -->
                    <!-- Column -->
                    <div class="card">
                        <div class="card-body text-center">
                            <h4 class="text-center">Page Views</h4>
                            <div id="spark11"><canvas style="display: inline-block; width: 99px; height: 70px; vertical-align: top;" width="99" height="70"></canvas></div>
                        </div>
                        <div class="box b-t text-center">
                            <h4 class="font-medium m-b-0"><i class="ti-angle-down text-danger"></i> 456</h4></div>
                    </div>
                    <!-- Column -->
                </div>

                <div class="row">
                    <!-- Column -->
                    <div class="col-lg-4 col-md-4">
                        <div class="card card-inverse card-primary">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="m-r-20 align-self-center">
                                        <h1 class="text-white"><i class="ti-pie-chart"></i></h1></div>
                                    <div>
                                        <h3 class="card-title">Bandwidth usage</h3>
                                        <h6 class="card-subtitle">March  2017</h6> </div>
                                </div>
                                <div class="row">
                                    <div class="col-4 align-self-center">
                                        <h2 class="font-light text-white">50 GB</h2>
                                    </div>
                                    <div class="col-8 p-t-10 p-b-20 align-self-center">
                                        <div class="usage chartist-chart" style="height:65px"><div class="chartist-tooltip"></div><svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-line" style="width: 100%; height: 100%;"><g class="ct-grids"></g><g><g class="ct-series ct-series-a"><path d="M30,60L30,37.5C34.157,41.25,46.627,65.25,54.941,60C63.255,54.75,71.568,6.75,79.882,6C88.196,5.25,96.51,52.5,104.823,55.5C113.137,58.5,121.451,25.5,129.764,24C138.078,22.5,146.392,49.5,154.705,46.5C163.019,43.5,171.333,15,179.646,6C187.96,-3,200.431,-5.25,204.588,-7.5L204.588,60Z" class="ct-area"></path><path d="M30,37.5C34.157,41.25,46.627,65.25,54.941,60C63.255,54.75,71.568,6.75,79.882,6C88.196,5.25,96.51,52.5,104.823,55.5C113.137,58.5,121.451,25.5,129.764,24C138.078,22.5,146.392,49.5,154.705,46.5C163.019,43.5,171.333,15,179.646,6C187.96,-3,200.431,-5.25,204.588,-7.5" class="ct-line"></path><line x1="30" y1="37.5" x2="30.01" y2="37.5" class="ct-point" ct:value="5"></line><line x1="54.94107273646763" y1="60" x2="54.95107273646763" y2="60" class="ct-point" ct:value="0"></line><line x1="79.88214547293526" y1="6" x2="79.89214547293527" y2="6" class="ct-point" ct:value="12"></line><line x1="104.82321820940291" y1="55.5" x2="104.83321820940292" y2="55.5" class="ct-point" ct:value="1"></line><line x1="129.76429094587053" y1="24" x2="129.77429094587052" y2="24" class="ct-point" ct:value="8"></line><line x1="154.70536368233817" y1="46.5" x2="154.71536368233816" y2="46.5" class="ct-point" ct:value="3"></line><line x1="179.64643641880582" y1="6" x2="179.6564364188058" y2="6" class="ct-point" ct:value="12"></line><line x1="204.58750915527344" y1="-7.5" x2="204.59750915527343" y2="-7.5" class="ct-point" ct:value="15"></line></g></g><g class="ct-labels"></g></svg></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <!-- Column -->
                    <div class="col-lg-4 col-md-4">
                        <div class="card card-inverse card-success">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="m-r-20 align-self-center">
                                        <h1 class="text-white"><i class="icon-cloud-download"></i></h1></div>
                                    <div>
                                        <h3 class="card-title">Download count</h3>
                                        <h6 class="card-subtitle">March  2017</h6> </div>
                                </div>
                                <div class="row">
                                    <div class="col-4 align-self-center">
                                        <h2 class="font-light text-white">35487</h2>
                                    </div>
                                    <div class="col-8 p-t-10 p-b-20 text-right">
                                        <div class="spark-count" style="height:65px"><canvas width="146" height="70" style="display: inline-block; width: 146px; height: 70px; vertical-align: top;"></canvas></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <!-- Column -->
                    <div class="col-lg-4 col-md-4">
                        <div class="card">
                            <img class="" src="assets/images/background/weatherbg.jpg" alt="Card image cap">
                            <div class="card-img-overlay" style="height:110px;">
                                <h3 class="card-title text-white m-b-0 dl">New Delhi</h3>
                                <small class="card-text text-white font-light">Sunday 15 march</small>
                            </div>
                            <div class="card-body weather-small">
                                <div class="row">
                                    <div class="col-8 b-r align-self-center">
                                        <div class="d-flex">
                                            <div class="display-6 text-info"><i class="wi wi-day-rain-wind"></i></div>
                                            <div class="m-l-20">
                                                <h1 class="font-light text-info m-b-0">32<sup>0</sup></h1>
                                                <small>Sunny Rainy day</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4 text-center">
                                        <h1 class="font-light m-b-0">25<sup>0</sup></h1>
                                        <small>Tonight</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                </div>

            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Wrapper -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- All Jquery -->
    <!-- ============================================================== -->
    <script src="assets/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="assets/plugins/popper/popper.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="assets/lib/jquery.slimscroll.js"></script>
    <!--Wave Effects -->
    <script src="assets/lib/waves.js"></script>
    <!--Menu sidebar -->
    <script src="assets/lib/sidebarmenu.js"></script>
    <!--stickey kit -->
    <script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
    <script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
    <!--Custom JavaScript -->
    <script src="assets/lib/custom.min.js"></script>
    <script src="assets/lib/mask.js"></script>
    <!-- ============================================================== -->
    <!-- Style switcher -->
    <!-- ============================================================== -->

    <script src="assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>

    <script src="assets/lib/BootstrapMenu.min.js"></script>

    <script src="assets/plugins/layui/layui.all.js"></script>
    <script src="material/js/common/i18n.js"></script>
    <script src="material/js/common/common.js"></script>
    <script src="material/js/baseConfig.js"></script>
    <script src="material/js/index.js"></script>
    <script src="assets/plugins/bootstrap3-dialog-1.35.4/dist/js/bootstrap-dialog.min.js"></script>
    <link rel="stylesheet" href="assets/plugins/bootstrap3-dialog-1.35.4/dist/css/bootstrap-dialog.min.css"/>

    <script src="assets/plugins/icheck/icheck.min.js"></script>
    <link href="assets/plugins/icheck/skins/square/red.css" rel="stylesheet">
    <link href="assets/plugins/icheck/skins/line/red.css" rel="stylesheet">
    <link href="assets/plugins/icheck/skins/minimal/red.css" rel="stylesheet">
    <link href="assets/plugins/icheck/skins/polaris/polaris.css" rel="stylesheet">
    <script>
        $("#content-main").css("height",($(window).height()-110)+"px");
        window.onresize=function(){
            $("#content-main").css("height",($(window).height()-110)+"px");
        }

        $('#original').iCheck({
            checkboxClass: 'icheckbox_minimal-red',
            radioClass: 'iradio_minimal-red',
            increaseArea: '20%' // optional
        });

        $('#square').iCheck({
            checkboxClass: 'icheckbox_square-red',
            radioClass: 'iradio_square-red',
            increaseArea: '20%' // optional
        });

        $('#polaris').iCheck({
            checkboxClass: 'icheckbox_polaris',
            radioClass: 'iradio_polaris',
            increaseArea: '-10%' // optional
        });

    </script>
</body>

</html>